<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>根据已知节点查找其他节点</title>
    <style>
        .selected {
            background-color: red;
        }
    </style>
    <script>
        function f1() {
            let i3 = document.getElementById("i3");
            console.log(i3);
            // 将指定节点引入指定的class选择器样式
            // 语法:节点.className = "class选择器名"
            i3.className = "selected"
        }

        function f2() {
            let i3 = document.getElementById("i3");
            // 查找父节点
            let parent = i3.parentNode;
            parent.className = "selected"
        }

        function fn(obj) {
            obj.className = "selected";
        }
    </script>
</head>
<body>
<ul>
    <li>item1</li>
    <li>item2</li>
    <li id="i3">item3</li>
    <li>item4</li>
    <li>item5</li>
</ul>
<script>
    let i3 = document.getElementById("i3");
</script>
<button onclick="fn(i3)">当前节点</button>
<br>
<button onclick="fn(i3.parentNode)">父节点</button>
<br>
<!--
    在HTML中,文本也是节点,称之为文本节点
-->
<button onclick="fn(i3.previousSibling.previousSibling)">上一个节点</button>
<br>
<button onclick="fn(i3.nextSibling.nextSibling)">下一个节点</button>
<br>
<button onclick="fn(i3.parentNode.firstChild.nextSibling)">父节点的第一个子节点</button>
<br>
<button onclick="fn(i3.parentNode.lastChild.previousSibling)">父节点的最后一个子节点</button>
<br>
</body>
</html>
